{% extends "site_base.html" %}

{% load attach_tags %}
{% load widget_tweaks %}
{% load qa_tags %}
{% load comments %}
{% load static %}
{% load i18n %}


{% block head_title %}{% trans "Log a new fault" %}{% endblock %}

{% block extra_css %}
  {{ block.super }}
  <link href="{% static "select2/css/select2.min.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/custom-select2.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "flatpickr/css/flatpickr.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/flatpickr-custom.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/custom-select2.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "service_log/css/sl.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "faults/css/faults.css" %}?v={{ VERSION }}" rel="stylesheet">
{% endblock extra_css %}

{% block extra_js %}
  <script type="text/javascript">
    var status_colours_dict = {{ status_tag_colours|safe }};
    var se_statuses =  {{ se_statuses|safe }};
  </script>
{% endblock extra_js %}

{% block require_javascript %}
    require(['faults']);
{% endblock require_javascript %}

{% block body %}

<div class="max-width-lg">
  <form action="" method="post" novalidate enctype="multipart/form-data">

    {% csrf_token %}

    <div class="row">
      <div class="col-md-3">
        <h3 class="no-margin-top">
          {% if form.instance.id %}
            {% trans "Edit Fault" %}: {{ form.instance }}
          {% else %}
            {% trans "Log A New Fault" %}
          {% endif %}
        </h3>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
          </div>
            <div class="box-body">
              <div class="row" style="display: none;">
                {% for field in form.hidden_fields %}
                  {{ field }}
                  {% if field.errors %}
                    {{ field.errors }}
                  {% endif %}
                {% endfor %}
              </div>
              <div class="row">
                <div class="col-md-12 form-horizontal">
                  <fieldset>
                    <legend>{% trans "Fault Details" %}</legend>
                    {% include "_form_horizontal.html" with form=form include_attach_table=1 %}
                  </fieldset>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 form-horizontal">
                  <fieldset>
                    <legend>{% trans "Reviewers" %}</legend>
                    {% for review_form in review_forms %}
                      <div class="form-group {% if review_form.errors %}has-error{% endif %}">
                        <label class="col-sm-4 control-label" for="{{ review_form.group.id_for_label }}">
                          {{ review_form.group.label }} {% if review_form.reviewed_by.field.required %}*{% endif %}
                        </label>
                        <div class="col-sm-3">
                          {{ review_form.group|add_class:"form-control input-sm" }}
                        </div>
                        <label class="col-sm-2 control-label" for="{{ review_form.reviewed_by.id_for_label }}">
                          {{ review_form.reviewed_by.label }}
                        </label>
                        <div class="col-sm-3">
                          {{ review_form.reviewed_by|add_class:"form-control input-sm reviewed-by-select" }}
                          {% if review_form.errors.reviewed_by %}
                            <div class="help-block error-message">
                              {% for err in review_form.errors.reviewed_by %}
                                {{ err }}
                              {% endfor %}
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    {% endfor %}
                  </fieldset>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <button class="btn btn-flat btn-primary pull-right" type="submit">
                    {% if form.instance.id %}
                      {% trans "Update Fault" %}
                    {% else %}
                      {% trans "Log Fault" %}
                    {% endif %}
                  </button>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>



  </form>

  {% if form.instance.id %}
    <div id="box-comments" class="row">
      <div class="col-sm-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">
              <i class="fa fa-commenting-o fa-fw"></i>
              {% trans "Comments" %}
            </h3>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-md-12">
                {% render_comment_list for fault %}
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                {% get_comment_form for fault as form %}

                <form id="comment-form" method="post">
                  {% csrf_token %}
                  <input id="id_name" maxlength="50" name="name" type="hidden" required="" value="{{ user.username }}">
                  {{ form.object_pk }}
                  {{ form.content_type }}
                  {{ form.security_hash }}
                  {{ form.timestamp }}
                  <textarea cols="40" id="id_comment" maxlength="3000" name="comment" rows="3" required="" placeholder="{% trans "Add comment" %}" class="margin-bottom-20 form-control autosize"></textarea>
                </form>
                <div class="row">
                  <div class="col-md-12">
                    <button id="post-comment" class="btn btn-flat btn-info btn-sm pull-right" disabled="disabled">{% trans "Post Comment" %}</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>

{% endblock body %}
